<template>
  <el-pagination
    class="pagination"
    :current-page="currentPage"
    :page-sizes="[10, 20, 50, 100]"
    :hide-on-single-page="pageHidden"
    :page-size="limit"
    layout="total, sizes, prev, pager, next, jumper"
    :total="len"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  ></el-pagination>
</template>

<script>
export default {
  props: {
    getList: {
      type: Function,
      default: () => {}
    },
    len: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      limit: 10,
      currentPage: 1
    }
  },
  computed: {
    pageHidden() {
      return this.len < this.limit
    }
  },
  created() {
    this.getList(this.currentPage, this.limit)
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val
      this.getList(this.currentPage, this.limit)
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.getList(this.currentPage, this.limit)
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  margin-top: 16px;
}
</style>
